<template>
  <div class="type-container">
    <el-descriptions border>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">申请类型</div>
        </template>
        <div class="custom-content">{{ applicationTypeStr }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请信息正文 -->
  <div class="content-container">
    <!-- 基础信息 -->
    <div class="basic-info-container">
      <div class="activityId-container" v-show="!isAdd">
        <el-descriptions border class="custom-descriptions">
          <el-descriptions-item>
            <template #label>
              <div class="custom-label">活动编号</div>
            </template>
            <div class="custom-content">{{ activityInfo.activityId }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <el-descriptions border class="custom-descriptions" >
        <el-descriptions-item>
          <template #label>
            <div class="custom-label">所属社团名</div>
          </template>
          <div class="custom-content">{{ activityInfo.clubName }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="custom-label">所属社团编号</div>
          </template>
          <div class="custom-content">{{ activityInfo.clubId }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="form-container">
      <el-form :model="activityInfo" label-width="120px">
        <el-form-item label="活动名称">
          <el-input v-model="activityInfo.activityName" placeholder="请输入活动名称"></el-input>
        </el-form-item>
        <el-form-item label="活动文章标题">
          <el-input v-model="activityInfo.activityTitle" placeholder="请输入活动文章标题"></el-input>
        </el-form-item>
        <el-form-item label="活动文章内容">
          <el-input
              v-model="activityInfo.activityContent"
              type="textarea"
              :rows="4"
              placeholder="请输入活动文章内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <div class="time-selector">
            <el-date-picker
                v-model="activityInfo.startTime"
                type="datetime"
                placeholder="开始时间"
            />
            <el-date-picker
                v-model="activityInfo.endTime"
                type="datetime"
                placeholder="结束时间"
            />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <!-- 申请原因填写区域 -->
  <div class="reason-container">
    <el-input
        v-model="reason"
        type="textarea"
        :rows="4"
        placeholder="请输入申请原因（选填）"
    ></el-input>
  </div>

  <!-- 提交申请按钮 -->
  <div class="submit-button-container">
    <el-button type="primary" @click="submit"> 提交申请</el-button>
  </div>
</template>

<script setup lang="ts">
import {type Action, ElButton, ElInput, ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {
  type ActivityApplicationAdditionalInfo,
  type ActivityApplicationAddRequest,
  ActivityApplicationControllerService,
  ActivityControllerService,
  ClubControllerService
} from "../../../../generated";
import {useUserStore} from "../../../stores/user.ts";
import moment from "moment";

interface ActivityInfo {
  targetId: number;
  activityId: number;
  activityName: string;
  activityTitle: string;
  activityContent: string;
  startTime: string;
  endTime: string;
  clubId: number;
  clubName: string;
}

const store = useUserStore();
const route = useRoute();
const type = route.meta.type as number;  // 从路由配置的 meta 中获取 type 字段

const isAdd = ref(true);
const applicationTypeStr = ref('');
const activityInfo = ref<ActivityInfo>({
  targetId: 0,
  activityId: 0,
  activityName: "",
  activityTitle: "",
  activityContent: "",
  startTime: "",
  endTime: "",
  clubId: 0,
  clubName: "",
});

const loadData = async () => {
  if(type === 8){
    applicationTypeStr.value = '举办活动';
    activityInfo.value.targetId = store.managedClubId

    const res = await ClubControllerService.getClubVoById(store.managedClubId);
    if (res?.code === 0) {
      activityInfo.value.clubId = store.managedClubId;
      activityInfo.value.clubName = res.data?.clubName as string;
    } else {
      ElMessage.error("信息加载错误，请重试: " + res?.message);
    }
  } else {
    applicationTypeStr.value = '修改活动信息';
    const activityIdStr = route.query.activityId as string | undefined; // 获取查询参数
    const activityId = Number(activityIdStr); // 转换为数字
    activityInfo.value.targetId = activityId;

    const res = await ActivityControllerService.getActivityVoById(activityId);
    if(res?.code === 0){
      activityInfo.value.activityId = res?.data?.id as number;
      activityInfo.value.activityTitle = res.data?.activityTitle as string;
      activityInfo.value.activityContent = res.data?.activityContent as string;
      activityInfo.value.activityName = res?.data?.activityName as string;
      activityInfo.value.startTime = res?.data?.startTime as string;
      activityInfo.value.endTime = res?.data?.endTime as string;
      activityInfo.value.clubId = res?.data?.clubVO?.id as number;
      activityInfo.value.clubName = res?.data?.clubVO?.clubName as string;
    } else {
      ElMessage.error("信息加载错误，请重试: " + res?.message);
    }
  }
}

onMounted(() => {
  loadData();
})

const reason = ref("");
const timeFormatSwitch = (time: string): string => {
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}

const submit = async () => {
  const additionalInfo = {
    activityName: activityInfo.value.activityName,
    activityTitle: activityInfo.value.activityTitle,
    activityContent: activityInfo.value.activityContent,
  } as ActivityApplicationAdditionalInfo;

  const request = {
    userId: store.id,
    reason: reason.value,
    type: type,
    targetId: activityInfo.value.targetId,
    startTime: timeFormatSwitch(activityInfo.value.startTime),
    endTime: timeFormatSwitch(activityInfo.value.endTime),
    additionalInfo: additionalInfo,
  } as ActivityApplicationAddRequest

  const res = await ActivityApplicationControllerService.addApplication1(request);
  if (res.code === 0) {
    const successStr = '申请等级: 活动; 申请类型: ' + applicationTypeStr.value + '; 申请编号:' + res.data;
    ElMessageBox.alert(
        successStr,
        "提交成功",
        {
          confirmButtonText: "确定",
          callback: (action: Action) => {
            if (action === "confirm") {
              try {
                window.close();
              } catch (e) {
                ElMessage({
                  type: "info",
                  message: "无法自动关闭页面，请手动关闭此标签页。",
                  duration: 0,
                  showClose: true,
                });
              }
            }
          },
        },
    );
  } else {
    const errorStr = '错误原因: ' + res.message;
    ElMessageBox.alert(errorStr, "提交失败", {
      confirmButtonText: "确定",
      callback: (action: Action) => {
        if (action === "confirm") {
          window.location.reload()  // 刷新当前页面
        }
      },
    })
  }
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.type-container {
  width: 20%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.custom-label,
.custom-content {
  font-size: 15px;
}

.content-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.activityId-container {
  width: 30%;
  margin-bottom: 20px;
}

.basic-info-container{
  width: 50%;
  margin-bottom: 40px;
}

.reason-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
